<!--
//Author: ChrisKyle
//Project: https://github.com/ViaAnthroposBenevolentia/gemini-2-live-api-demo
//MIT License : https://github.com/ViaAnthroposBenevolentia/gemini-2-live-api-demo/blob/main/LICENSE
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gemini Multimodal Live API Client</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <div class="settings">
            <input type="password" id="api-key" placeholder="Please Input Gemini API Key" />
            <button id="config-toggle" class="material-symbols-outlined">settings</button>
        </div>
        <div id="config-container" class="hidden-mobile">
            <div class="config-wrapper">
                <div class="setting-container">
                    <span class="setting-label">Language: </span>
                    <select id="language-select">
                    </select>
                </div>
                <div class="setting-container">
                    <span class="setting-label">Sound: </span>
                    <select id="voice-select">
                        <option value="Puck">Puck (Male)</option>
                        <option value="Charon">Charon (Male)</option>
                        <option value="Fenrir">Fenrir (Male)</option>
                        <option value="Kore">Kore (Female)</option>
                        <option value="Aoede" selected>Aoede (Female)</option>
                    </select>
                </div>
                <div class="setting-container">
                    <span class="setting-label">Response Type: </span>
                    <select id="response-type-select">
                        <option value="text">Text</option>
                        <option value="audio" selected>Audio</option>
                    </select>
                </div>
                <div class="setting-container">
                    <span class="setting-label">Video FPS: </span>
                    <input type="number" id="fps-input" placeholder="Video FPS" value="1" min="1" max="30" step="1"/>
                    <span class="fps-help">Higher FPS need more network bandwidth</span>
                </div>
                <textarea id="system-instruction" placeholder="Enter custom system instructions..." rows="6"></textarea>
                <button id="apply-config">Confirm</button>
            </div>
        </div>
        <button id="connect-button">Connect</button>
        <div id="logs-container"></div>
        <input type="text" id="message-input" placeholder="Enter message...">
        <button id="send-button">Send</button>
        <button id="mic-button">
            <span id="mic-icon" class="material-symbols-outlined">mic</span>
        </button>
        <button id="camera-button">
            <span id="camera-icon" class="material-symbols-outlined">videocam</span>
        </button>
        <button id="screen-button">
            <span id="screen-icon" class="material-symbols-outlined">screen_share</span>
        </button>
        <div class="audio-visualizers">
            <div class="visualizer-container">
                <label>Input Audio</label>
                <div id="input-audio-visualizer"></div>
            </div>
            <div class="visualizer-container">
                <label>Output Audio</label>
                <div id="audio-visualizer"></div>
            </div>
        </div>
        <div id="video-container" style="display: none;">
            <video id="preview" playsinline autoplay muted></video>
            <div class="video-controls">
                <button id="stop-video">Stop Video</button>
                <button id="flip-camera">
                    <span class="material-symbols-outlined">flip_camera_ios</span>
                </button>
            </div>
        </div>
        <div id="screen-container" style="display: none;">
            <video id="screen-preview" playsinline autoplay muted></video>
            <button class="close-button material-symbols-outlined">close</button>
        </div>
    </div>
    <script src="js/main.js" type="module"></script>
</body>
</html>
